<template>
  <div class="Journalism">
    <Header />
    <div class="image">
      <p>招聘新闻和数据实时跟踪</p>
    </div>
    <div class="content">
      <div class="content-wrap">
        <div class="content-wrap-top">
          <div class="wrap-top-content">
            <div class="wrap-top-content-box">
              <div class="box-title">
                <span class="sign"></span>
                <span class="title">数据报告</span>
                <span class="more">more</span>
              </div>
              <img class="box-img" src="../assets/image/journalism1.jpg" alt="">
              <div class="box-text">拿不到年终奖就跳槽？80后或成最硬核职场人 | 2018年终奖调查</div>
            </div>
            <div class="wrap-top-content-box">
              <div class="box-title">
                <span class="sign"></span>
                <span class="title">干货文章</span>
                <span class="more">more</span>
              </div>
              <img class="box-img" src="../assets/image/journalism2.jpg" alt="">
              <div class="box-text">“春天，我和城市一起复苏”职人赏春摄影大赛</div>
            </div>
            <div class="wrap-top-content-box">
              <div class="box-title">
                <span class="sign"></span>
                <span class="title">公司动态</span>
                <span class="more">more</span>
              </div>
              <img class="box-img" src="https://resumeurl.oss-cn-shenzhen.aliyuncs.com/imgUrl/journalism1.jpg" alt="">
              <div class="box-text">2020年招聘网站就业生态发展简报</div>
            </div>
            
          </div>
        </div>
        <div class="content-wrap-bottom" id="journalism-box">
          <div class="bottom-box" v-for="(item, index) in journalismList" :key="index">
            <div class="bottom-box-left">
              <img :src="item.jimg" alt="">
            </div>
            <div class="bottom-box-right">
              <div class="bottom-box-right-title">{{item.jtitle}}</div>
              <div class="bottom-box-right-content">{{item.jcontent}}</div>
              <div class="bottom-box-right-text">
                <span> {{item.jauthor}} ·</span>
                <span> {{item.jdate}} </span>
              </div>
            </div>
          </div>
        </div>
        <div class="lookMore-box">
          <button class="lookMore" @click="lookMoreClick">浏览更多</button>
        </div>
      </div>
    </div>
    
    <BottomNav />
  </div>
</template>

<script>
import Header from '../components/Header/index'
import BottomNav from '../components/BottomNav/index'
export default {
  name: 'journalism',
  components: {Header, BottomNav},
  data() {
    return {
      journalismList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getJournalism()
  },
  mounted() {},
  methods: {
    // 获取资讯数据
    getJournalism() {
      this.$request.get('/api/api/Journalism/GetInfo').then((res) => {
        // console.log(res)
        // this.journalismList = res
        this.journalismList = res.data.reverse()
      })
    },
    // 点击浏览更多
    lookMoreClick() {
      var journalismList = document.getElementById('journalism-box')
      var journalismListHeight = journalismList.clientHeight
      if (journalismListHeight <= 2190) {
        if (this.journalismList.length % 2 !== 0) {
          journalismList.style.height = journalismListHeight + 140 + 'px'
        } else {
          journalismList.style.height = journalismListHeight + 360 + 'px'
        }
        // journalismList.style.height = journalismListHeight + 150 + 'px'
      }
      if (journalismListHeight > 2628) {
        journalismList.style.height = '2920px'
      }
      // console.log(journalismListHeight);
    },
  },
}
</script>
<style scoped>
.journalism{
  width: 100%;
  height: 100%;
  background-color: #f6f6f8;
}
.image {
  width: 100%;
  height: 400px;
  background: #444c60 url('../assets/image/list-banner.jpg') center center
    no-repeat;
  /* height: 204px; */
  /* color: #fff;
  padding: 20px 0;
  margin-bottom: 30px; */
}
.image p{
  font-size: 35px;
  color: #fff;
  text-align: center;
  line-height: 200px;
}
.image-wrap {
  width: 1084px;
  margin: auto;
}
.image-wrap img {
  width: 100%;
  height: 100%;
  /* width: 354px;
  height: 120px; */
}
.content{
  width: 100%;
  /* height: 2000px; */
  /* margin-bottom: 100px; */
  padding-bottom: 50px;
  background-color: #f6f6f8;
}
.content-wrap{
  width: 1084px;
  /* height: 2000px; */
  margin: auto;
}
.content-wrap-top{
  width: 1084px;
  height: 400px;
  background-color: #fff;
  margin-bottom: -80px;
  padding: 30px 0;
  position: relative;
  top: -100px;
}
.wrap-top-content{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
}
.wrap-top-content-box{
  width: 284px;
  height: 200px;
  margin: 0 38px;
}
.box-title{
  height: 25px;
  margin-bottom: 20px;
}
.sign{
  display: block;
  width: 3px;
  height: 20px;
  background-color: #55cbc4;
  margin-right: 10px;
  float: left;
}
.title{
  font-size: 18px;
  line-height: 20px;
}
.more{
  float: right;
  border: 1px solid #bebebe;
  border-radius: 30px;
  padding: 2px 4px;
  color: #999;
  cursor: pointer;
  transition: all 0.4s;
}
.more:hover{
  color: #fff;
  background-color: #55cbc4;
}
.box-img{
  width: 100%;
  height: 100%;
  margin: 20px 0;
  cursor: pointer;
}
.box-text{
  font-size: 22px;
  line-height: 30px;
  color: #414a60;
  cursor: pointer;
  transition: all 0.4s;
}
.box-text:hover{
  color: #55cbc4;
}


.content-wrap-bottom{
  width: 984px;
  height: 913px;
  overflow: hidden;
  background-color: #fff;
  padding: 50px;
}
.bottom-box{
  height: 180px;
  margin: 20px;
  display: flex;
  padding-bottom: 40px;
  border-bottom: 1px solid #bebebe;
}
.bottom-box:nth-last-of-type(1){
  border-bottom: 0;
}
.bottom-box-left{
  flex: 1;
  padding: 0 50px 0 0;
  overflow: hidden;
}
.bottom-box-left img{
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.5s;
}
.bottom-box-left img:hover{
  transform: scale(1.05);
}
.bottom-box-right{
  flex: 2;
}
.bottom-box-right-title{
  font-size: 20px;
  color: #414a60;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.4s;
}
.bottom-box-right-title:hover{
  color: #55cbc4;
}
.bottom-box-right-content{
  text-indent: 33px;
  height: 75px;
  line-height: 25px;
  color: #666;
  padding: 20px 0;
  margin-bottom: 15px;
  overflow: hidden;
}
.bottom-box-right span{
  color: #999999;
}
.lookMore-box{
  width: 1084px;
  height: 100px;
  background-color: #fff;
}
.lookMore{
  width: 954px;
  height: 60px;
  padding: 10px;
  background-color: #fff;
  color: #bbb;
  /* margin: 0 auto; */
  margin-left: 65px;
  font-size: 16px;
  border: 1px #f0f0f0 solid;
  cursor: pointer;
  transition: all 0.5s;
  outline: none;
}
.lookMore:hover{
  background-color: #f5f5f5;
  color: #55cbc4;
}
</style>